<template>
    <div class="container" style="overflow:hidden;">
       <div>
           <div style="width: 75%">
               <div style="float: left;">{{slectMapLabel}}</div>
               <div style="float: right;">
                   <template>
                       <el-select v-model="value" placeholder="请选择地图模块" @change="haldSelectMapDemo">
                           <el-option
                                   v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                           </el-option>
                       </el-select>
                   </template>
               </div>
           </div>
           <div v-show="value==2" style="width: 75%;height: 690px;overflow:hidden;cursor: move;position: relative;margin: 0;float: left;" id="imgContent">
               <div @mousedown="mousedown($event)" @mouseup='mouseup($event)' @click="clickToushi($event)" style="position: absolute;top:0;left: 0;z-index: 1;">
                   <img src="../../../assets/img/ShaanxiShiDa.jpg" alt="" id="moveImg">
                   <!--<div class="equip-posi" :style="'background-image:url('+require('../../../assets/img/DeviceImages/electric_error.png')+');top: 400px;left: 860px;'" @click="openEquipment">-->
                       <!--<div class="equip-posi-text"><span>中心空调电表</span></div>-->
                   <!--</div>-->
                   <div class="equip-posi" v-for="(item,index) in pointToushi" :key="index" :style="item.stylestr" @click="openEquipment($event,item.id,item.pid)">
                       <div class="equip-posi-text"><span>{{item.elementName}}</span></div>
                   </div>
               </div>
                <div class="photoDemoBox">
                    <span>显示名称</span><span @click="movePhotoPoint">移动</span><span @click="delPhotoPoint">删除</span>
                </div>
           </div>
           <div id="mapBox" v-show="value==1"></div>
       </div>
       <div>
           <div class="dataList">
               <el-tabs type="border-card" name="first">
                   <el-tab-pane label="已添加">

                       <el-menu class="sidebar-el-menu"
                                active-text-color="#20a0ff">
                           <template v-for="item in addedDataList">
                               <template>
                                   <el-submenu :index="''+item.id" :key="item.id">
                                       <template slot="title">
                                           <span slot="title">{{ item.elementTypeName }}</span>
                                       </template>
                                       <template v-for="subItem in item.child">
                                           <el-menu-item :index="''+subItem.id" :key="subItem.id" @click="setMapCenter(subItem.latitude,subItem.longitude)">
                                               {{ subItem.elementName }}
                                           </el-menu-item>
                                       </template>
                                   </el-submenu>
                               </template>
                           </template>
                       </el-menu>
                   </el-tab-pane>
                   <el-tab-pane label="未添加" name="second">
                       <el-menu class="sidebar-el-menu"
                                active-text-color="#20a0ff">
                           <template v-for="item in dataList">
                               <template>
                                   <el-submenu :index="''+item.id" :key="item.id">
                                       <template slot="title">
                                           <span slot="title">{{ item.elementTypeName }}</span>
                                       </template>
                                       <template v-for="subItem in item.child">
                                           <el-menu-item :index="''+subItem.id" :key="subItem.id" @click="addOverMarker(subItem.id,subItem.elementName,subItem.imageUrl,subItem.pid,item.elementTypeName)">
                                               {{ subItem.elementName }}
                                           </el-menu-item>
                                       </template>
                                   </el-submenu>
                               </template>
                           </template>
                       </el-menu>
                   </el-tab-pane>
               </el-tabs>
               <!--<div v-for="item in dataList.a" @click="addOverMarker(item.name)">{{item.name}}</div>-->
           </div>
       </div>

    </div>
</template>

<script>
    import {getListUnaddGis,getListAddedGis,addPointGis,movePointGis,deletePointGis} from  '../../../api/index';
    var map = null;
    export default {
        name: "edit-map",
        data(){
            return {
                dataList:{
                    a:[{name:'电表',imgsrc:'../../../assets/img/DeviceImages/electric_error.png'},{name:'水表',imgsrc:'../../../assets/img/DeviceImages/electric_error.png'}],
                },
                addedDataList:{},
                addedDataListOrgin:"",
                devices:{"d":[{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":544183829,"ElementName":"灯","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":10003,"ElementName":"电表","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":10002,"ElementName":"阀门","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":805984560,"ElementName":"防水","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":707679955,"ElementName":"光照","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":250360156,"ElementName":"户外温湿度(行政楼)","ElementTypeName":"设备","PId":656554070,"Longitude":"116.36884100","Latitude":"39.96858900","PointX":0,"PointY":0,"ImageUrl":"../Images/DeviceImages/map_tb_40.png"},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":366564706,"ElementName":"检测","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":1,"ElementName":"建筑物","ElementTypeName":"建筑物","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":979727769,"ElementName":"空调电源柜2(行政楼)","ElementTypeName":"设备","PId":10003,"Longitude":"0.00177000","Latitude":"0.00206200","PointX":0,"PointY":0,"ImageUrl":"../Images/DeviceImages/electric_off.png"},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":294855632,"ElementName":"空调机房泵组冷却塔(行政楼)","ElementTypeName":"设备","PId":10003,"Longitude":"116.36936200","Latitude":"39.97033100","PointX":0,"PointY":0,"ImageUrl":"../Images/DeviceImages/electric_off.png"},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":797995840,"ElementName":"空调机房主机1(行政楼)","ElementTypeName":"设备","PId":10003,"Longitude":"117.80638100","Latitude":"40.20747900","PointX":0,"PointY":0,"ImageUrl":"../Images/DeviceImages/electric_off.png"},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":672772232,"ElementName":"空调机房主机2(行政楼)","ElementTypeName":"设备","PId":10003,"Longitude":"116.36798700","Latitude":"39.97016500","PointX":0,"PointY":0,"ImageUrl":"../Images/DeviceImages/electric_off.png"},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":719388647,"ElementName":"空调控制器","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":417530499,"ElementName":"乐清人民医院能源监管平台/行政楼","ElementTypeName":"建筑物","PId":1,"Longitude":"116.36929","Latitude":"39.969723","PointX":0,"PointY":0,"ImageUrl":"../Images/SysIcons/tb_qp49.png"},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":274134087,"ElementName":"气表","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":853886571,"ElementName":"热表","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":408736225,"ElementName":"热水表","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":364479312,"ElementName":"水表","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":773846740,"ElementName":"水侵","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":306593062,"ElementName":"温光","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":656554070,"ElementName":"温湿","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null},{"__type":"RHEA.KaiStar.Entity.Maps.MonitorSubstanceView","Id":537387580,"ElementName":"烟感","ElementTypeName":"设备","PId":-1,"Longitude":null,"Latitude":null,"PointX":0,"PointY":0,"ImageUrl":null}]},
                selectDevice:null,
                selectDevicePid:null,
                selectDeviceName:null,
                selectDeviceImg:null,
                deletePoints:null,
                isMovePoint:false,
                infoWindow:null,
                isAddPoint:false,
                isAddPointToushi:false,
                isMovePointToushi:false,
                mapLng:null,
                mapLat:null,
                options: [{
                    value: '2',
                    label: '透视地图'
                }, {
                    value: '1',
                    label: 'GIS地图'
                }],
                value: '1',
                slectMapLabel:'GIS地图',
                pointToushi:[],
                pointToushiX:null,
                pointToushiY:null,
            }
        },
        mounted(){

            this.getUnaddListData();
            this.getListAddedGis();
            this.initMap();
        },
        watch:{

        },
        methods:{
            //获取已添加的标注点的数据列表
            getListAddedGis(){
                getListAddedGis({
                gisType:this.value
                }).then((res) =>{
                    this.addedDataList = this.formatData(res.d)
                    this.addedDataListOrgin = res.d;
                    this.initMapPoint();
                    this.addPointToushi();
                })
            },
            //获取未添加的标注点的数据列表
            getUnaddListData(){
                getListUnaddGis({
                    gisType:this.value
                }).then((res) =>{
                    // console.log(res)
                    this.dataList = this.formatData(res.d)
                })
            },
            //给地图添加标注点接口
            addPointMap(){
                var params = {}
                if(this.value == 1){
                    params['id'] = this.selectDevice;
                    params['elementName'] =  this.selectDeviceName;
                    params['elementTypeName'] =  this.selectDeviceTypeName;
                    params['imageUrl'] = this.selectDeviceImg;
                    params['latitude'] = this.mapLat;
                    params['longitude'] = this.mapLng;
                    params['pid'] = this.selectDevicePid;
                    params['gisType'] = this.value;
                }else if(this.value == 2){
                    params['id'] = this.selectDevice;
                    params['pointX'] = this.pointToushiX;
                    params['pointY'] = this.pointToushiY;
                    params['pid'] = this.selectDevicePid;
                    params['gisType'] = this.value;
                    params['elementName'] =  this.selectDeviceName;
                    params['elementTypeName'] =  this.selectDeviceTypeName;
                    params['imageUrl'] = this.selectDeviceImg;
                }
                addPointGis(params).then((res) =>{
                    console.log(res)
                    this.isAddPointToushi = false;
                    this.getUnaddListData();
                    this.getListAddedGis();
                })
            },
            //地图移动标注点接口
            movePointGis(){
                var params = {}
                if(this.value == 1){
                    params['id'] = this.selectDevice;
                    params['latitude'] = this.mapLat;
                    params['longitude'] = this.mapLng;
                    params['pid'] = this.selectDevicePid;
                    params['gisType'] = this.value;
                }else if(this.value == 2){
                    params['id'] = this.selectDevice;
                    params['pointX'] = this.pointToushiX;
                    params['pointY'] = this.pointToushiY;
                    params['pid'] = this.selectDevicePid;
                    params['gisType'] = this.value;
                }
                movePointGis(params).then((res) =>{
                    console.log(res)
                    this.isMovePointToushi = false
                    this.getUnaddListData();
                    this.getListAddedGis();
                })
            },
            //地图删除标注点接口
            deletePointGis(){
                deletePointGis({
                    id:this.selectDevice,
                    pid:this.selectDevicePid,
                    gisType:this.value,
                }).then((res) =>{
                    console.log(res)
                    this.getUnaddListData();
                    this.getListAddedGis();
                })
            },
            //初始化地图
            initMap(){
                var _this = this;
                map = new BMap.Map("mapBox");
                map.centerAndZoom(new BMap.Point(121.22732,31.029372), 17);
                var mapType1 = new BMap.MapTypeControl(
                    {
                        mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
                        anchor: BMAP_ANCHOR_TOP_LEFT
                    }
                );
                //添加地图类型和缩略图
                map.addControl(mapType1);//2D图，混合图
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

                // 定义一个控件类,即function
                function ZoomControl(){
                    // 默认停靠位置和偏移量
                    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
                    this.defaultOffset = new BMap.Size(10, 10);
                }

                // 通过JavaScript的prototype属性继承于BMap.Control
                ZoomControl.prototype = new BMap.Control();

                // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
                // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
                ZoomControl.prototype.initialize = function(map){
                    // 创建一个DOM元素
                    var div = document.createElement("div");

                    var btn1 = document.createElement("div");
                    btn1.appendChild(document.createTextNode("显示名称"));
                    div.appendChild(btn1);

                    var btn2 = document.createElement("div");
                    btn2.appendChild(document.createTextNode("移动"));
                    div.appendChild(btn2);

                    var btn3 = document.createElement("div");
                    btn3.appendChild(document.createTextNode("删除"));
                    div.appendChild(btn3);
                    // 设置样式
                    div.style.cursor = "pointer";
                    div.style.color = "#333";
                    div.style.fontSize = "14px";

                    btn1.style.backgroundColor = "#eee";
                    btn1.style.padding = "2px 10px";
                    btn1.style.cssFloat = "left";

                    btn2.style.backgroundColor = "#eee";
                    btn2.style.padding = "2px 10px";
                    btn2.style.cssFloat = "left";
                    btn2.style.marginLeft = "5px";

                    btn3.style.backgroundColor = "#eee";
                    btn3.style.padding = "2px 10px";
                    btn3.style.cssFloat = "left";
                    btn3.style.marginLeft = "5px";

                    // 绑定事件
                    btn1.onclick = function(e){
                        console.log('显示名称')
                    }
                    btn1.onmouseover = function(e){
                        btn1.style.backgroundColor = "#f00";
                        btn1.style.color = "#fff";
                    }
                    btn1.onmouseout = function(e){
                        btn1.style.backgroundColor = "#eee";
                        btn1.style.color = "#333";
                    }

                    btn2.onclick = function(e){
                        console.log('移动')
                        _this.movePoint();
                    }
                    btn2.onmouseover = function(e){
                        btn2.style.backgroundColor = "#f00";
                        btn2.style.color = "#fff";
                    }
                    btn2.onmouseout = function(e){
                        btn2.style.backgroundColor = "#eee";
                        btn2.style.color = "#333";
                    }

                    btn3.onclick = function(e){
                        console.log('删除')
                        _this.deletePoint();
                    }
                    btn3.onmouseover = function(e){
                        btn3.style.backgroundColor = "#f00";
                        btn3.style.color = "#fff";
                    }
                    btn3.onmouseout = function(e){
                        btn3.style.backgroundColor = "#eee";
                        btn3.style.color = "#333";
                    }
                    // 添加DOM元素到地图中
                    map.getContainer().appendChild(div);
                    // 将DOM元素返回
                    return div;
                }
                // 创建控件
                var myZoomCtrl = new ZoomControl();
                // 添加到地图当中
                map.addControl(myZoomCtrl);

                map.addEventListener("click", function (e) {
                    _this.mapLng = e.point.lng;
                    _this.mapLat =  e.point.lat;
                    if(_this.isAddPoint){
                        _this.addPointMap();
                        // _this.addPoint();

                        // _this.getUnaddListData();
                        // _this.getListAddedGis();
                    }
                    if(_this.isMovePoint){
                        _this.deletePoint();
                        _this.movePointGis()
                        // _this.addPoint();

                        // _this.getUnaddListData();
                        // _this.getListAddedGis();
                    }
                });
            },
            //初始化地图上的标注点
            initMapPoint(){
                var pointArray = this.addedDataListOrgin;
                for (var i = 0; i < pointArray.length; i++) {
                    if(pointArray[i].longitude && pointArray[i].latitude){
                        this.selectDevice = pointArray[i].id;
                        this.selectDevicePid = pointArray[i].pid;
                        this.selectDeviceName =pointArray[i].elementName;
                        this.selectDeviceImg = pointArray[i].imageUrl;
                        this.mapLng = pointArray[i].longitude;
                        this.mapLat =  pointArray[i].latitude;
                        this.addPoint();
                    }
                }
                //让所有点在视野范围内
                // map.setViewport(pointArray);
            },
            //点击设备
            addOverMarker(_id,_name,_img,_pid,_typeName){
               this.selectDevice = _id;
               this.selectDevicePid = _pid;
               this.selectDeviceName = _name;
               this.selectDeviceImg = _img;
                this.selectDeviceTypeName = _typeName
                if(this.value == 1){
                    this.isAddPoint = true;
                }else if(this.value == 2){
                    this.isAddPointToushi = true;
                }

            },
            //添加标注点
            addPoint(){
                // map.clearOverlays();

                var points = new BMap.Point(this.mapLng, this.mapLat);
                var labels = new BMap.Label("<span title='"+this.selectDevice+"#' img='"+this.selectDeviceImg+"@' pid='"+this.selectDevicePid+"%'></span>"+this.selectDeviceName,{offset:new BMap.Size(16,30)});
                var myIcons = new BMap.Icon(require('../../../assets/img/DeviceImages/'+this.selectDeviceImg), new BMap.Size(32,48));
                var markers = new BMap.Marker(points,{icon:myIcons});
                map.addOverlay(markers);
                markers.setLabel(labels);
                markers.addEventListener("click",this.pointClick);
                this.selectDevice = null;
                this.selectDeviceName = null;
                this.selectDeviceImg = null;
                this.selectDevicePid = null;
                this.isAddPoint = false;
                this.isMovePoint = false;
                // this.deletePoints = null;
            },
            //删除标注点
            deletePoint(){
                if(!this.deletePoints){
                    this.$message.error('请选择删除点');
                    return ;
                }
                if(!this.isMovePoint){
                    this.deletePointGis()
                }

                this.isMovePoint = false;
                this.isAddPoint = false;
                this.isAddPointToushi = false;
                if(this.value == 1){
                    map.removeOverlay(this.deletePoints);
                    this.infoWindow.close();
                }

                this.deletePoints = null;



            },
            //标注点点击事件
            pointClick(e){
                var p = e.target;
                this.isAddPoint = false;
                this.deletePoints = p;
                var opts = {
                    width : 100,     // 信息窗口宽度
                    height: 50,     // 信息窗口高度
                    title : "你选中了我" , // 信息窗口标题
                }
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                this.infoWindow = new BMap.InfoWindow("",opts);  // 创建信息窗口对象
                map.openInfoWindow(this.infoWindow,point); //开启信息窗口

                var dCode = p.getLabel().content.substring(p.getLabel().content.indexOf('=')+2,p.getLabel().content.indexOf('#'));
                var dCodeName = p.getLabel().content.substring(p.getLabel().content.indexOf('</span>')+7,p.getLabel().content.length);
                var dCodeImg = p.getLabel().content.substring(p.getLabel().content.indexOf('img')+5,p.getLabel().content.indexOf('@'));
                var dCodePid = p.getLabel().content.substring(p.getLabel().content.indexOf('pid')+5,p.getLabel().content.indexOf('%'));
                this.selectDevice = dCode;
                this.selectDeviceName = dCodeName;
                this.selectDeviceImg = dCodeImg;
                this.selectDevicePid = dCodePid;
            },
            //移动标注点
            movePoint(){
                if(!this.deletePoints){
                    this.$message.error('请选择移动点');
                    return ;
                }
                this.isMovePoint = true;
                this.isAddPoint = false;
            },
            //设置地图中心的
            setMapCenter(_lat,_lon){
                map.centerAndZoom(new BMap.Point(_lon,_lat), 17);
            },
            //格式化列表数据
            formatData(d){
                var pdata = d.filter(item=>item.pid<=0);
                var cdata = d.filter(item=>item.pid>0);
               for(var i=0;i<pdata.length;i++){
                   var cArr = [] ;
                   for(var k = 0;k<cdata.length;k++){
                       if(pdata[i].id == cdata[k].pid){
                           cArr.push(cdata[k]);
                       }
                   }
                   pdata[i]['child'] = cArr;
               }
                return pdata;
            },
            mousedown: function (event) {
                var event=event||window.event;
                var _target = event.currentTarget;

                var startx=event.clientX;
                var starty=event.clientY;
                var sb_bkx=startx-_target.offsetLeft;
                var sb_bky=starty-_target.offsetTop;
                if (event.preventDefault) {
                    event.preventDefault();
                } else{
                    event.returnValue=false;
                };
                document.onmousemove=function (ev) {
                    var event=ev||window.event;
                    var endx=event.clientX-sb_bkx;
                    var endy=event.clientY-sb_bky;
                    var cH = document.getElementById('imgContent').offsetHeight;
                    var cW = document.getElementById('imgContent').offsetWidth;
                    if(endx>-1||endy>-1|| (endy < cH - _target.offsetHeight)|| ( endx < cW - _target.offsetWidth)){
                        return ;
                    }
                    _target.style.left=endx+'px';
                    _target.style.top=endy+'px';
                }
            },
            mouseup: function (e) {
                document.onmousemove=null;
            },
            openEquipment(e,_id,_pid){
                this.deletePoints = e.target;
                this.selectDevice = _id;
                this.selectDevicePid = _pid;
            },
            //点击选择地图模块
            haldSelectMapDemo(val){
                this.getListAddedGis();
                this.getUnaddListData();
                for(var i=0;i<this.options.length;i++){
                    if(this.options[i].value == val){
                        this.slectMapLabel = this.options[i].label
                    }
                }
                if(val==1){
                    this.$nextTick(function () {
                        this.initMap();
                        this.initMapPoint();
                    })

                }
            },
            //点击透视地图
            clickToushi(event){
                var event=event||window.event;
                var _target = event.currentTarget;
                console.log(event)
                var startx=event.clientX;
                var starty=event.clientY;
                var sb_bkx=startx-_target.offsetLeft;
                var sb_bky=starty-_target.offsetTop;
                if (event.preventDefault) {
                    event.preventDefault();
                } else{
                    event.returnValue=false;
                };
                var endx=event.clientX-sb_bkx;
                var endy=event.clientY-sb_bky;
                // console.log('offsetX:'+event.offsetX)
                // console.log('offsetY:'+event.offsetY)
                // console.log('startx:'+startx)
                // console.log('starty:'+starty)
                // console.log('_target.offsetLeft:'+_target.offsetLeft)
                // console.log('_target.offsetTop:'+_target.offsetTop)
                // console.log('sb_bkx:'+sb_bkx)
                // console.log('sb_bky:'+sb_bky)
                // console.log('endx:'+endx)
                // console.log('endy:'+sb_bky)
                this.pointToushiX = event.offsetX-16;
                this.pointToushiY = event.offsetY-48;
                if(this.isAddPointToushi && this.value == 2 && this.selectDevice){
                    this. addPointMap();
                    this.selectDevice = null;
                }
                if(this.isMovePointToushi){
                    this.movePointGis();
                }

            },
            //添加透视地图上的点
            addPointToushi(){
                var pointArray = this.addedDataListOrgin;
                console.log(pointArray)
                var demoList = [];
                for (var i = 0; i < pointArray.length; i++) {
                    if(pointArray[i].pointX && pointArray[i].pointY){
                        console.log(pointArray[i])
                        demoList.push(this.formatStyle(pointArray[i]))
                    }
                }
                console.log(demoList)
                this.pointToushi = demoList;

            },
            //格式化透视地图需要添加的坐标点的style样式 obj
            formatStyle(str){
                str['stylestr'] = 'background-image:url('+require('../../../assets/img/DeviceImages/'+str.imageUrl)+');top: '+str.pointY+'px;left: '+str.pointX+'px;';
                return str ;
            },
            //点击透视图的删除按钮
            delPhotoPoint(){
                this.deletePoint()
            },
            //点击透视图的移动按钮按钮
            movePhotoPoint(){
                this.isMovePointToushi = true
            }

        }
    }
</script>

<style scoped>
    #mapBox {width: 75%;height: 690px;overflow: hidden;margin:0;font-family:"微软雅黑";float: left}
    .dataList{width: 25%;float: right;}
    /deep/ .el-submenu__title,.el-submenu .el-menu-item{
        height: 30px;
        line-height: 30px;
    }
    .equip-posi{
        width: 50px;
        height: 50px;
        position: absolute;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .equip-posi-text{
        margin-top: 50px; width: 150px;
    }
    .equip-posi-text span{
        background: #000;color: #fff;
    }
    .photoDemoBox{
        position: absolute;
        top: 10px;
        right: 0px;
        z-index: 9;
        cursor:pointer;
    }
    .photoDemoBox span{
        background-color: rgb(238, 238, 238);
        padding: 2px 10px;
        color: rgb(51, 51, 51);
        margin-right: 10px;
        font-size: 14px;
    }
    .photoDemoBox span:hover{
        color: #fff;
        background-color:#f00;
    }
</style>